<template>
    <a-layout>
        <a-layout-sider width="200" style="background: #fff">
            <a-affix :offset-top="top">
            <a-menu
                    mode="inline"
                    :style="{ height: '100%', borderRight: 0 }"
            >
                <a-input-search
                        v-model:value="value"
                        placeholder="input search text"
                        enter-button
                        @search="onSearch"
                />

                <div style="padding: 20px"><span>请根据需要筛选条件：</span></div>


                <a-cascader
                        v-model:value="gendersValue"
                        :options="genders"
                        :display-render="displayRender"
                        expand-trigger="hover"
                        placeholder="性别要求"
                        style="padding: 10px 0"
                />
              <a-cascader
                      v-model:value="gradesValue"
                      :options="grades"
                      :display-render="displayRender"
                      expand-trigger="hover"
                      placeholder="等级要求"
                      style="padding: 10px 0"
              />
                <a-cascader
                        v-model:value="areasValue"
                        :options="areas"
                        :display-render="displayRender"
                        expand-trigger="hover"
                        placeholder="地区要求"
                        style="padding: 10px 0"
                />

              <a-button type="primary" style="margin-left: 20px" @click="confirmChoice">确认</a-button>
              <a-button style="float: right; margin-right: 20px" @click="clearChoice">清空</a-button>
            </a-menu>
            </a-affix>
        </a-layout-sider>
        <a-layout-content
                :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
        >
            <a-list item-layout="vertical" size="large" :grid="{gutter: 20, column: 3}" :pagination="pagination"
                    :data-source="teachers">
                <template #renderItem="{ item }">
                    <a-list-item key="item.title">
                        <a-image
                                width="272"
                                height="100"
                                alt="logo"
                                class="logo-image"
                                :src="item.liftPhoto"
                        />
                        <input type="hidden" :value="item.teacher_id" />
                        <template #actions>
                            <span v-for="{ type, text } in actions" :key="type">
                              <component v-bind:is="type" style="margin-right: 8px"/>
                              {{ text }}
                            </span>
                        </template>
                        <a-list-item-meta :description="item.description">
                            <template #title>
                                <a :href="href + item.teacher_id">{{ item.username }}</a>
                            </template>
                            <template #avatar>
                                <a-avatar :src="item.avatar"/>
                            </template>
                        </a-list-item-meta>
                    </a-list-item>
                </template>
            </a-list>
        </a-layout-content>
    </a-layout>
</template>

<script lang="ts">
    import {defineComponent, onMounted, ref} from 'vue';
    import axios from "axios";

    interface Grade {
      value: string;
      label: string;
      children?: Grade[];
    }

    const listData: any = [];

    // for (let i = 0; i < 23; i++) {
    //     listData.push({
    //         href: 'https://www.antdv.com/',
    //         title: `ant design vue part ${i}`,
    //         avatar: 'image/logo.jpg',
    //         description:
    //             'Ant Design, a design language for background applications, is refined by Ant UED Team.',
    //         content:
    //             'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
    //     });
    // }

    const genders = [
        {
            value: 'male',
            label: '男'
        },
        {
            value: 'female',
            label: '女'
        }
    ];

    export default defineComponent({
        name: 'Home',
        setup() {
            const teachers = ref();
            const value = ref<string>('');

            const displayRender = ({labels}: { labels: string[] }) => {
                return labels[labels.length - 1];
            };

            const onSearch = (searchValue: string) => {
                console.log('use value', searchValue);
                console.log('or use this.value', value.value);
            };

            onMounted(() => {
                axios.get("/main/teacherList").then((response) => {
                    const data = response.data;
                    teachers.value = data.content;
                });
            });

            return {
                teachers,
                listData,
                value,
                gendersValue: ref<string[]>([]),
                genders,
                displayRender,
                onSearch,
                pagination: {
                    onChange: (page: any) => {
                        console.log(page);
                    },
                    pageSize: 9,
                },
                actions: [
                    {type: 'StarOutlined', text: '156'},
                    {type: 'LikeOutlined', text: '156'},
                    {type: 'MessageOutlined', text: '2'},
                ],
            };
        },
    });
</script>

<style scoped>
    .ant-avatar {
        width: 50px;
        height: 50px;
        line-height: 50px;
        border-radius: 8%;
        margin: 5px 0;
    }

    /deep/ .ant-layout-sider-children {
        padding-left: 15px;
    }

    .ant-input-search {
        margin-top: 15px;
        margin-bottom: 15px;
    }

    /deep/ .ant-image {
        margin-bottom: 10px;
    }

    /deep/ .logo-image {
        width: 326px;
        height: 200px;
    }

  /deep/ .ant-anchor-ink {
    display: none;
  }
</style>